<template>
  <div>
    <div class="top-nav">
      <div :class="{active:choosePage}" @click="turnPageZero">官方资讯</div>
      <div :class="{active:!choosePage}"  @click="turnPageOne">乐销商学院</div>
    </div>
    <div class="page-zero" v-if="choosePage">
      <section v-infinite-scroll="loadMore" 
      infinite-scroll-disabled="loading"
       infinite-scroll-distance="10"
        infinite-scroll-immediate-check="loading">
        <div v-for="(elem,index) of companyEvents" :key="index" class="company-event-bg">
          <div class="company-event">
            <div class="one-sentence">
              <a>{{elem.titel}}</a>
            </div>
            <div class="event-imgs" :class="{eventimgsT: elem.ifShowTwo}">
              <div v-for="(img,index) of elem.imgs" :key="index" class="event-img" :style="{height:eventImgHeight}" ref="companyStyle" :class="{eventimgT: elem.ifShowTwo}">
                <img :src="img" v-preview="img">
              </div>
            </div>
            <div class="company-event-date">
              <span>{{elem.createTime | formatDate}}</span>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="page-one" v-if="!choosePage" ref="pageOne" :style="{height: oneHeight}">
      <section v-infinite-scroll="loadMore"
       infinite-scroll-disabled="loading"
        infinite-scroll-distance="10" 
        infinite-scroll-immediate-check="loading">
        <div v-for="(elem,index) of lexiaoEvents" :key="index" class="company-event-bg">
          <div class="lexiao-event" :style="{height:lexiaoImgHeight}" @click="lexiaoDeail(elem.id)">
            <div class="lexiao-event-img">
              <img :src="elem.simplImg" alt="">
            </div>
            <div class="lexiao-event-info">
              <div class="lexiao-event-title">{{elem.titel}}</div>
            </div>
            <div class="event-date">
              <span>{{elem.createTime| formatDate}}</span>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- tab菜单栏 -->
    <loadmore v-show="loadingDom"></loadmore>
    <tabbar :selected='selected' :tabs='tabs'></tabbar>
    <lg-preview></lg-preview>
  </div>
</template>
<script>
  import tabbar from '../components/tabbar'
  import loadmore from '../components/loadmore'
  import { userInfoGet, WXShare } from '../libs/publicMethod'
  import { getContext } from '../libs/interface' // 获取接口
  export default {
    components: { tabbar, loadmore ,getContext, WXShare, userInfoGet },
    data () {
      return {
        userInfo: userInfoGet(),
        oneHeight: '',
        loading: false, // 下拉参数
        loadingDom: false,
        offset: sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0,
        selected: 'tab3',
        choosePage: true,
        eventImgHeight: '', // 官方资讯图片高度
        lexiaoImgHeight: '', // 乐销商学院图片高度
        tabs: [
          require('../assets/tabs/sc.png'),
          require('../assets/tabs/zq.png'),
          require('../assets/tabs/fx2.png'),
          require('../assets/tabs/ylc.png'),
          require('../assets/tabs/user.png')
        ],
        companyEvents: [],
        lexiaoEvents: [],
      }
    },
    methods: {
      lexiaoDeail (id) {
        let vm = this
        sessionStorage.setItem('foundScrollOffset', JSON.stringify({ scroll: vm.$refs.pageOne.scrollTop, offset: vm.offset }))
        vm.$router.push('/lexiaoDetail/'+id)
      },
      turnPageZero () {
        let vm = this
        if (!vm.choosePage) {
          vm.$router.replace('/found/0')
          document.documentElement.scrollTop = 0
          vm.choosePage = true
          vm.loading = false
          vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
          vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
          window.onresize = function windowResize() {
            vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
            vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
          }
          let params = {
            offset: 0,
            limit: 10,
            type: 3,
          }
          getContext(params, (data) => {
            console.log(data)
            if (data.code === 1 && data.payload.length > 0) {
              vm.companyEvents = data.payload
              vm.companyEvents.forEach((elem) => {
                elem.imgs = elem.simplImg.split(',')
                elem.ifShowTwo = elem.imgs.length === 2 || elem.imgs.length === 4 ? true : false
              })
            } else {
              vm.$toast('暂未请求到数据,请稍后再试')
            }
          })
        }
      },
      turnPageOne () {
        let vm = this
        if (vm.choosePage) {
          vm.$router.replace('/found/1')
          document.documentElement.scrollTop = 0
          vm.offset = sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0
          let i = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
          vm.oneHeight = i - 47.3 - 60 + 'px'
          vm.choosePage = false
          vm.loading = false
          // vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
          vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
          window.onresize = function windowResize() {
            // vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
            vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
          }
          let params = {
            offset: 0,
            limit: 10,
            type: 4,
          }
          if (sessionStorage.getItem('foundScrollOffset')) {
            let foundSO = JSON.parse(sessionStorage.getItem('foundScrollOffset'))
            foundSO.offset += 10
            params.limit = foundSO.offset
            getContext(params, (data) => {
              console.log(data)
              if (data.code === 1 && data.payload.length > 0) {
                vm.lexiaoEvents = data.payload
                vm.$nextTick(() => {
                  vm.$refs.pageOne.scrollTop = foundSO.scroll
                  setTimeout(() => {
                    sessionStorage.removeItem('foundScrollOffset')
                  }, 0)
                })
              } else {
                vm.$toast('暂未请求到数据,请稍后再试')
              }
            })
          } else {
            getContext(params, (data) => {
              console.log(data)
              if (data.code === 1 && data.payload.length > 0) {
                vm.lexiaoEvents = data.payload
              } else {
                vm.$toast('暂未请求到数据,请稍后再试')
              }
            })
          }
        }
      },
      // 上拉加载更多
      loadMore() {
        let vm = this
        if (sessionStorage.getItem('foundScrollOffset')) return null
        vm.loading = true
        vm.loadingDom = true
        vm.offset += 10
        let params = {
          offset: vm.offset,
          limit: 10,
          type: 3,
        }
        if (!vm.choosePage) {
          params.type = 4
        }
        getContext(params, (data) => {
          if (data.code === 1 && data.payload.length > 0) {
            vm.$nextTick(() => {
              data.payload.forEach((item) => {
                if (!vm.choosePage) {
                  vm.lexiaoEvents.push(item)
                } else {
                  vm.companyEvents.push(item)
                  item.imgs = item.simplImg.split(',')
                  item.ifShowTwo = item.imgs.length === 2 || item.imgs.length === 4 ? true : false
                }
              })
            })
            vm.loading = false
          } else {
            vm.loading = true
            vm.offset -= 10
            vm.$toast('暂未请求到数据,请稍后再试')
          }
          vm.loadingDom = false
        })
      },
    },
    mounted () {
      let vm = this
      if (vm.$route.params.id === '1') {
        document.body.style.paddingBottom = '44px'
        let i = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
        vm.oneHeight = i - 47.3 - 60 + 'px'
        vm.choosePage = false
        // vm.eventImgHeight = vm.$refs.companyStyle[0].offsetWidth + 'px'
        // vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
        vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
        window.onresize = function windowResize() {
          // vm.eventImgHeight = vm.$refs.companyStyle[0].offsetWidth + 'px'
          // vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
          vm.lexiaoImgHeight = document.body.clientWidth * 0.94 * 0.35 * 0.75 + 'px'
        }
        let params = {
          offset: 0,
          limit: 10,
          type: 4,
        }
        if (sessionStorage.getItem('foundScrollOffset')) {
          let foundSO = JSON.parse(sessionStorage.getItem('foundScrollOffset'))
          foundSO.offset += 10
          params.limit = foundSO.offset
          getContext(params, (data) => {
            console.log(data)
            if (data.code === 1 && data.payload.length > 0) {
              vm.lexiaoEvents = data.payload
              vm.$nextTick(() => {
                vm.$refs.pageOne.scrollTop = foundSO.scroll
                setTimeout(() => {
                  sessionStorage.removeItem('foundScrollOffset')
                }, 0)
              })
            } else {
              vm.$toast('暂未请求到数据,请稍后再试')
            }
          })
        } else {
          getContext(params, (data) => {
            console.log(data)
            if (data.code === 1 && data.payload.length > 0) {
              vm.lexiaoEvents = data.payload
            } else {
              vm.$toast('暂未请求到数据,请稍后再试')
            }
          })
        }
      } else {
        document.body.style.paddingBottom = '44px'
        vm.choosePage = true
        // vm.eventImgHeight = vm.$refs.companyStyle[0].offsetWidth + 'px'
        vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
        vm.lexiaoImgHeight = document.body.clientWidth * 0.35 * 0.75 + 'px'
        window.onresize = function windowResize() {
          // vm.eventImgHeight = vm.$refs.companyStyle[0].offsetWidth + 'px'
          vm.eventImgHeight = document.body.clientWidth * 0.94 * 0.4 + 'px'
          vm.lexiaoImgHeight = document.body.clientWidth * 0.35 * 0.75 + 'px'
        }
        let params = {
          offset: 0,
          limit: 10,
          type: 3,
        }
        getContext(params, (data) => {
          let vm = this
          console.log(data)
          if (data.code === 1 && data.payload.length > 0) {
            vm.companyEvents = data.payload
            vm.companyEvents.forEach((elem)=>{
              elem.imgs = elem.simplImg.split(',')
              elem.ifShowTwo = elem.imgs.length === 2 || elem.imgs.length === 4 ? true : false
            })
          } else {
            vm.$toast('暂未请求到数据,请稍后再试')
          }
        })
      }
      
      // 分享
      var Sdata = {                                                          //分享请求配置
        gotoPage:this.$route.path,                                          //邀请者链接         
        inviterID: userInfoGet().id,                                                        //链接带的参数
        type:1,
        desc:'享高端品质，品精致生活，尽在乐销商城！',
        imgUrl:'http://120.77.73.224:80/group1/M00/00/05/eE1J4FoedWqALp8pAABLzkI6gxQ837.png',                                                       //链接图片（小图）     
        shareTitle: '【' + userInfoGet().nick + '】' + '邀请您一起逛乐销商城'              //邀请话
      }
      WXShare.topShare(Sdata)
    },
    filters: {
      formatDate(input) {
        var d = new Date(input);
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
        var hour = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        return year + '年' + month + '月' + day + '日' + hour + ':' + minutes + ':' + seconds;
      }
    }
  }
</script>
<style>
.top-nav{
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  z-index: 10;
}
.top-nav>div{
  width: 100%;
  height: 2.8rem;
  line-height: 3rem;
  font-size: 1.05rem;
  letter-spacing: .1rem;
}
.active{
  border-bottom: 2.5px solid #E42519;
}
.page-zero{
  margin-top: 3.2rem;
}
.company-event-bg{
  background-color: #fff;
  margin-bottom: 3%;
}
.company-event{
  width: 94%;
  margin: 0 auto ;
  background-color: #fff;
}
.one-sentence{
  font-size: .8rem;
  text-align: left;
  padding: 4% 0 2%;
}
.one-sentence a{
  color: #333;
  letter-spacing: .1rem;
}
.event-imgs{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.eventimgsT{
  justify-content: center;
}
.event-img{
  width: 32%;
  margin-top: 2%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.eventimgT{
  width: 32%;
  margin: 2% 1%;
}
.event-img img{
  height: 100%;
}
.company-event-date{
  font-size: .7rem;
  text-align: left;
  color: #D0D0D0;
  padding: 2% 0;
}
.company-event-date span{
  display: inline-block;
  transform: scale(.9, .9);
  letter-spacing: .05rem;
}
.page-one{
  margin-top: 3.2rem;
  overflow: auto;
}
.lexiao-event{
  width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.lexiao-event-img{
  width: 35%;
}
.lexiao-event-img img{
  display: block;
  width: 100%;
  height: 100%;
}
.lexiao-event-info{
  width: 59%;
  padding: 4% 3% 0 3%;;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.lexiao-event-title{
  width: 100%;
  text-align: left;
  font-size: .9rem;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.event-date{
  font-size: .85rem;
  text-align: left;
  color: #D0D0D0;
  position: absolute;
  bottom: 2%;
  right: 1%;
}
.event-date span{
  display: inline-block;
  transform: scale(.9, .9);
}
</style>
